<template>
    <div class="customer" style="padding: 40px 20px 40px 0">

       <div style="width: 85%;" class="orderListFont">
		   <el-row>
		       <el-col :span="24">
		           <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="120px">
		                   <el-button type="primary" v-if="showBack" @click="fanhui()">返回</el-button>
		                   <el-button type="primary" @click="edit('add')" style="margin-right: 10px;">+新增</el-button> 
		                   <el-form-item label="规格名称：">
		                           <el-input v-model="formInline.spuName" style="width: 150px;" :maxlength="50"></el-input>              
		                   </el-form-item>
		   
		                   <el-button type="primary" @click="fetchData()">查询</el-button> 
		           </el-form>
		       </el-col>
		   </el-row>
		   
		   <el-table
		           :data="pageInfo.dtos"
		           v-loading="table_loading"
		           element-table_loading-text="加载中"
		           style="width: 100%">
		       <el-table-column
		               prop="spuName"
		               label="规格名称">
		       </el-table-column>
		       <el-table-column
		               prop="standardContent"
		               label="内容">
		               <template scope="scope">
		                    <div v-for="(item,index) in scope.row.shopSpuSecDtos" style="display: inline-block"><span v-if="index!=0">,</span>{{ item.spuName}}</div>
		               </template>
		       </el-table-column>
		       <el-table-column
		               prop="status"
		               label="状态">
		               <template scope="scope">
		                  <span>{{scope.row.spuStat==0? '禁用':'启用'}}</span>
		               </template>
		       </el-table-column>       
		       <el-table-column label="操作" >
		           <template scope="scope">
		               <el-button type="primary" size="small" @click="edit(scope.row.spuId)">编辑</el-button>
		               <el-button
		                       size="small"
		                       type="success"
		                       @click="changeStatus(scope.row,'启用')" v-if="scope.row.spuStat==0">启用
		               </el-button>
		               <el-button
		                       size="small"
		                       type="danger"
		                       @click="changeStatus(scope.row,'禁用')" v-else>禁用
		               </el-button>
		           </template>
		       </el-table-column>
		   </el-table>
		   <div class="paginate">
		       <el-pagination
		               @current-change="handleCurrentChange"
		               :current-page="pageInfo.pageNum"
		               :page-size="pageInfo.pageSize"
		               layout="total, prev, pager, next, jumper"
		               :total="pageInfo.count">
		       </el-pagination>
		   </div>
	   </div>
    
	
	</div>

</template>
<style>
 .orderListFont .el-form-item__label{
  	  text-align: right;
  	  font-size: 18px;
  	  font-weight: 500;
  }
</style>
<script>
	
	 
 
    export default {
        data() {
            return {
                title: '用户列表',
                table_loading: false,
                formInline: {
                    pageNum:1,
                    sort:'T1.CRE_TIME',
                    desc:'DESC',
                    pageSize:10,
                    storeId:'',
                },
                pageInfo: {
                    pageNum: 1,
                    pageSize: 10,
                    count: 1,
                    dtos: []
                },
                formLabelWidth: '120px',
                 showBack:true,
                 storeId:''
            }
        },
        created(){
 
			 
      console.log(this.$route.params.id);
	  if(this.$route.params.id){
		  // 是商品详情跳过来
		  sessionStorage.setItem('type',this.$route.params.id)
	  }
	  console.log(sessionStorage.getItem('keep'))
        if(sessionStorage.getItem('keep')==1) {
           this.showBack=true
        }
        this.fetchData(this.pageInfo.pageNum);
        },
       
        methods: {

            fetchData (page = 1) {

                this.table_loading = true;
                this.pageInfo.pageNum = page
                this.formInline.pageNum = this.pageInfo.pageNum
                this.dataApi.ajax('selectPageShopSpu',this.formInline, res => {
                    this.table_loading = false;
                    if (res.responseType === 'S') {
                        this.pageInfo = res
                    }
                });

            },
            handleCurrentChange(val) {
                this.fetchData(val)
            },
            edit(id){
               this.$router.push('/mall/size_detail/'+id)
            },
            changeStatus(item,status) {

                var state=''
                this.$confirm('确定'+status+'?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                     if (item.spuStat==0) {
                            state=1
                     }else{
                        state=0
                     }
                     var data={
                        spuId:item.spuId,
                        spuStat:state
                     }
                     this.dataApi.ajax('editShopSpu',data, res => {
                        if (res.responseType === 'S') {
                            this.showMsg(status+'成功!')
                            this.fetchData(this.pageInfo.pageNum)
                        }
                    });
                  
                }).catch(() => {
                           
                });
              },
            fanhui(){
				sessionStorage.setItem('sku','1')
                history.back(-1)
            },


        }
    }
</script>
